import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import style from './GeneralDesktop.module.less'
import { addResizeEvent, delResizeEvent } from '@redux/actions'
import YearTrend from '@components/desktop/LeaderDesktop/YearTrend'
import MessageBlock from '@components/desktop/DeputySecretaryGeneralDesktop/MessageBlock'
import CourtList from '@components/desktop/LeaderDesktop/CourtList'
import WeekDocket from '@components/desktop/LeaderDesktop/WeekDocket'
import WeekClosure from '@components/desktop/LeaderDesktop/WeekClosure'

class DeputySecretaryGeneralDesktop extends Component {
  state = {
    ready: true
  }

  componentDidMount () {
    this.props.addResizeEvent({
      name: 'leader-desktop',
      handle: () => this.setState({ ready: false }, () => {
        setTimeout(() => {
          this.setState({ ready: true })
        }, 100)
      })
    })
  }

  componentWillUnmount () {
    this.props.delResizeEvent('leader-desktop')
  }

  render () {
    return (
      <div className={style.container}>
        <div className={style.header}>
          <WeekDocket ready={this.state.ready} />
          <WeekClosure ready={this.state.ready} />
        </div>
        <div className={style.body}>
          <div className={style['body-left']}>
            <MessageBlock />
          </div>
          <div className={style['body-right']}>
            <CourtList />
          </div>
        </div>
        <div className={style.foot}>
          <YearTrend ready={this.state.ready} />
        </div>
      </div>
    )
  }
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {
    addResizeEvent: i => dispatch(addResizeEvent(i)),
    delResizeEvent: i => dispatch(delResizeEvent(i))
  }
})

export default connect(mapState, mapDispatch)(DeputySecretaryGeneralDesktop)
